<template>
  <!-- 项目分包-开票列表详情 5-3-1 -->
  <div>

    <div class="table-wrap" v-show="!billAddShow">
      <div class="table-top">
        <a-button type="primary" class="buttonColorGreen addButton ml10 mr10" @click="billAddShow=true">新增</a-button>
        <a-input-search placeholder="请输入内容" v-model="search" class="search" @search="onSearch" />
        <a-button type="primary" class="buttonColorGreen ml10 mr10">查询</a-button>
        <a-button type="primary" class="buttonColorGreen ml10 mr10" @click="reset">重置</a-button>
        <a-button type="primary" class="buttonColorGreen ml10 mr10" @click="back">返回</a-button>

      </div>

      <div class="table">
        <a-table :columns="columns" :dataSource="tableData" bordered>
          <span slot="operation">
            <span class="actionButton" @click="billAddShow=true">
              <a-icon type="check-circle" />修改</span>
            <a-divider type="vertical" />
            <span class="actionButton">
              <a-icon type="close" />删除</span>
          </span>
        </a-table>
      </div>
    </div>
    <billAdd v-show="billAddShow" :billAddShow.sync="billAddShow"></billAdd>
  </div>
</template>

<script>
import billAdd from './billAdd'
const columns = [{   //表格表头
  title: '序号',
  dataIndex: 'number',
  scopedSlots: { customRender: 'number' },
},
{
  title: '编号',
  dataIndex: 'objectNum',
}, {
  title: '开票代码',
  dataIndex: 'InvoiceCode',
}, {
  title: '发票号码',
  dataIndex: 'InvoiceNumber',
},
{
  title: '开票时间',
  dataIndex: 'checkinTime',
},
{
  title: '开票金额',
  dataIndex: 'money',
},
{
  title: '',
  // dataIndex: 'operation',
  scopedSlots: { customRender: 'operation' },
}
];

const tableData = [//表格数据
  {
    number: '1',
    objectNum: '￥300,000.00',
    InvoiceCode: '123456',
    InvoiceNumber: '565678',
    checkinTime: '2019-04-15',
    money: '100.000',
    objectType: '2019-04-15',
    customUnit: '500.000',
    account: '232'
  },
  {
    number: '2',
    objectNum: '￥1,256,000.00',
    InvoiceCode: '123456',
    InvoiceNumber: '565678',
    checkinTime: '2019-04-15',
    money: '100.000',
    objectType: '2019-04-15',
    customUnit: '500.000',
    account: '232'
  },
  {
    number: '3',
    objectNum: '￥120,000.00',
    InvoiceCode: '123456',
    InvoiceNumber: '565678',
    checkinTime: '2019-04-15',
    money: '100.000',
    objectType: '2019-04-15',
    customUnit: '500.000',
    account: '232'
  }
];

export default {
  props: {
    billDetailShow: Boolean
  },
  components: {
    billAdd
  },
  data() {
    return {
      tableData,
      columns,
      search: '',
      form: this.$form.createForm(this),
      billAddShow: false
    }
  },
  methods: {
    onSearch() {   //搜索

    },
    onDelete(key) {  //删除
      const dataSource = [...this.dataSource]
      this.dataSource = dataSource.filter(item => item.key !== key)
    },
    reset() {  //重置
      this.search = ""
    },
    back() {
      this.$emit('update:billDetailShow', false)
    }
  }
}
</script>
<style scoped>
.ant-table-thead > tr > th,
.ant-table-tbody > tr > td {
  padding: 12px 16px !important;
}
.form {
  margin: 0 0 20px 10px;
}
>>> .ant-form-item-label {
  width: 100px;
}
.ant-form-inline .ant-form-item {
  margin-right: -35px;
}
</style>
